<template>
  <div>
    <el-card class="box-card">
      <div class="clearfix">
        <div class="header">
          <el-button type="danger" icon="el-icon-delete" @click="deleteTable">删除</el-button>
          <div style="float:left">
            <el-input
              class="headerinput"
              style="max-width:'40px'"
              v-model="input"
              placeholder="物品名称"
            ></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchItem">搜索</el-button>
          </div>
        </div>
        <el-tag class="headerinfo">当前物品共计{{totle}}个</el-tag>
      </div>
      <!-- end of header -->
      <el-table
        ref="itemTable"
        @selection-change="handleSelectionChange"
        stripe
        border
        :data="pagedata"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="物品名称"></el-table-column>
        <el-table-column prop="icon" label="图标">
          <template slot-scope="scope">
            <img alt :src="scope.row.icon" style="height:3rem" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="$router.push(`edit/${scope.row._id}`)" type="text" size="small">编辑</el-button>
            <el-button @click="removeList(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        class="pagination"
        @current-change="changePage"
        background
        layout="prev,pager,next"
        :total="totle"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categorylist: [],
      input: "",
      totle: null,
      pagedata: [],
      page: null,
      selection: []
    };
  },
  created() {
    this.feach();
    this.feachPage();
    //console.log(res.data);
  },
  methods: {
    async feach() {
      let res = await this.$http.get("/rest/items");
      this.categorylist = res.data;
      this.totle = parseInt(this.categorylist.length);
      console.log(this.totle);
    },
    async feachPage(pageIndex = 1, pageSize = 10) {
      let res = await this.$http.get("/rest/items/pageIndex", {
        params: {
          pageSize,
          pageIndex
        }
      });
      this.pagedata = res.data;
    },
    async removeList(row) {
      this.$confirm(`是否确定要删除物品"${row.name}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.delete(`/rest/items/${row._id}`).then(res => {
            console.log(res.status);
            this.feachPage();
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    changePage(pageIndex) {
      console.log(pageIndex);
      this.page = pageIndex;
      this.feachPage(pageIndex);
    },
    searchItem() {
      /* if (this.input != "") {
        let res = this.categorylist.find(i => {
          return i.name === this.input;
        });
        console.log(res);
        this.pagedata = [];
        this.pagedata.push(res);
      } else {
        this.feachPage();
      } */
      if (this.input!='') {
        let res = this.categorylist.find(i=>{return i.name===this.input})
        if (res) {
          this.pagedata=[]
          this.pagedata.push(res)
        }else{
          this.$message({
            type:'warning',
            message:'找不到！！！'
          })
          return
        }
      }else{
        this.feachPage()
      }
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    async deleteTable() {
      if (this.selection=='') {
        return
      }
      this.$confirm(`是否确定要删除"${this.selection[0].name}..."`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.selection.forEach(e => {
            this.$http.delete(`/rest/items/${e._id}`);
            console.log(`成功删除${e.name}`);
          });
          this.feachPage();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  .headerinput {
    width: 160px !important;
    margin-right: 5px;
  }
}
.headerinfo {
  width: 100%;
}
.pagination {
  margin: 10px 0;
  float: right;
}
</style>